<template>
    <header id="app-header">
        <div class="flex align-items-center justify-content-between app-header-main">
            <h1 class="flex align-items-center">
                <nuxt-link to="/" class="logo">
                    <img class="logo-img" src="/img/bg_logo.svg" alt="">
                </nuxt-link>
                <nuxt-link to="/" class="title">微信开放社区</nuxt-link>
            </h1>
            <nav class="flex align-items-center">
                <div class="search-box">
                      <el-input
                            placeholder="搜索你要的内容"
                            v-model="keyword"
                            clearable>
                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                </div>
                <div class="notice">
                    <i class="el-icon-bell"></i>
                </div>

                <div class="flex align-items-center avatar">
                    <img src="https://wx.qlogo.cn/mmhead/fhicotyX5dAcM5gxVy01N06CpEVVRQIbicQ0p4lYteUBSLqOmTEpJdGw/64" alt="">
                    <div class="avatar-box">
                        <i class="el-icon-arrow-down"></i>
                        <ul>
                            <i class="icon_skin_pop_arrow"></i>
                            <li>
                                <nuxt-link to="/user/1">Jason</nuxt-link>
                            </li>
                            <li>
                                <span>退出</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
</template>
<script>
import "../assets/components/AppHeader.scss";
export default {
  data() {
    return {
      keyword: ""
    };
  }
};
</script>